<template>
    <div>
        <div class="page-header">
            <h1>
                <router-link to="/business/course">
                    {{courseinfo.name}}
                </router-link>
            </h1>
        </div>
        <div class="form-group">
            <file v-bind:text="'上传文件'" v-bind:input-id="'content-file-upload'"
                  v-bind:after-upload="afterUploadFile"
                  v-bind:suffixs="['mp4','mpeg','avi','jpg','png','jpeg']"
                  v-bind:use="FILE_USE.COURSE.key"></file>
            <table id="simple-table" class="table table-bordered">
                <thead>
                <tr>
                    <th>名称</th>
                    <th>地址</th>
                    <th>预览</th>
                    <th>大小</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="contentfile in contentfiles">
                    <td>{{contentfile.name}}</td>
                    <td>{{contentfile.url}}</td>
                    <td>
                        <div v-show="contentfile.url" class="row">
                            <div class="col-md-2">
                                <video id="video" v-if="getFileFormat(contentfile.name)==='video'"
                                       v-bind:src="contentfile.url" controls="controls"/>
                                <img v-if="getFileFormat(contentfile.name)==='image'" v-bind:src="contentfile.url"
                                     class="img-responsive"/>
                            </div>
                        </div>
                    </td>
                    <td>{{$filters.formatFileSize(contentfile.size)}}</td>
                    <td>
                        <div class="hidden-sm hidden-xs btn-group">
                            <button type="button" @click="handledeletefile(contentfile.id)"
                                    class="btn btn-white btn-sm btn-danger">
                                <i class="ace-icon fa fa-trash-o bigger-120"></i>删除
                            </button>
                        </div>

                        <div class="hidden-md hidden-lg">
                            <div class="inline pos-rel">
                                <button class="btn btn-minier btn-primary dropdown-toggle" data-toggle="dropdown"
                                        data-position="auto">
                                    <i class="ace-icon fa fa-cog icon-only bigger-110"></i>
                                </button>

                                <ul class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">
                                    <li>
                                        <a @click="handledeletefile(contentfile.id)" class="tooltip-error"
                                           data-rel="tooltip"
                                           title="删除">
												<span class="red">
												    <i class="ace-icon fa fa-trash-o bigger-120"></i>
												</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="form-group">
            <div class="col-lg-12">
                {{saveContentLabel}}
            </div>
        </div>
        <div class="form-group">
            <div class="col-lg-12">
                <div id="content"></div>
            </div>
        </div>
        <p>
            <router-link to="/business/course"  class="btn btn-white btn-round btn-default">
                <i class="ace-icon fa fa-arrow-left"></i>
                返回课程
            </router-link>
            <button  @click="saveContent" class="btn btn-white btn-round btn-default">
                <i class="ace-icon fa fa-save"></i>
                保存
            </button>
        </p>
    </div>


</template>


<style>
    video{
        width: 100%;
        height: auto;
        margin-top: 10px;
    }
    .page-header{
        margin: 0 0 12px;
        border-bottom: 1px dotted #E2E2E2;
        padding-bottom: 16px;
        padding-top: 7px;
    }
    .page-header h1 {
        padding: 0;
        margin: 0 8px;
        font-size: 24px;
        font-weight: lighter;
        color: #2679B5;
    }
    .page-header h1 small {
        margin: 0 6px;
        font-size: 14px;
        font-weight: 400;
        color: #8089A0;
    }
</style>

<script scope>
    import axios from 'axios';
    import {defineComponent, onMounted, ref} from 'vue';
    import File from '@/components/file.vue';
    import router from "../../router";
    import {onUnmounted} from "@vue/runtime-core";


    export default defineComponent({
        name: 'content',
        components:{
            File
        },
        setup() {
            let saveContentLabel=ref();
            const contentfiles=ref([]);
            const contentfileinfo=ref({});
            const courseinfo=ref({});
            let saveContentInterval;

            /*
           * 获取从课程界面传值的信息
           * */
            const getCourse=()=>{
                let course=SessionStorage.get(SESSION_KEY_COURSE) || {};
                if(Tool.isEmpty(course)){
                    router.push("/welcome");
                }
                courseinfo.value=course;
            }


            /*
            * 获取课程内容文件列表
            * */
            const getContentFile=()=>{
                Loading.show();
                axios.get("/business/admin/course-content-file/list/"+courseinfo.value.id).then((response)=>{
                    Loading.hide();
                    const data=response.data;
                    if(data.success){
                        contentfiles.value=data.content;
                    }else{
                        Toast.error("获取课程内容文件失败!");
                    }
                })
            }

            /*
            * 打开内容编辑模态框
            *
            * */
            const toContent=()=>{
                //初始化富文本框
                $("#content").summernote({
                    focus: true,
                    height: 300,
                    lang: 'zh-CN'
                });
                //获取课程文件列表
                getContentFile();
                //清空历史文本
                $("#content").summernote('code','');
                saveContentLabel.value="";
                Loading.show();
                axios.get("/business/admin/course/find-content/"+courseinfo.value.id).then((response)=>{
                    const data=response.data;
                    Loading.hide();
                    if (data.success) {

                        //若库中有值则赋值到富文本框
                        if(data.content){
                            $("#content").summernote('code',data.content.content);
                        }
                        //定时保存富文本
                         saveContentInterval =setInterval(function () {
                            saveContent();
                        },10000);
                    }else{
                        Toast.warning(data.message);
                    }
                })

            }

            /*
            * 保存课程内容
            * */
            const saveContent=()=>{
                let content=$("#content").summernote("code");
                axios.post("/business/admin/course/save-content",{
                    id: courseinfo.value.id,
                    content: content
                }).then((response)=>{
                    const data=response.data;
                    if(data.success){
                        // Toast.success("内容保存成功!");
                        //yyyy-MM-dd hh:mm:ss
                        let now=Tool.dateFormat("hh:mm:ss");
                        saveContentLabel.value="保存成功: "+now;
                    }else {
                        Toast.warning(data.message);
                    }
                })
            }

            /*
           * 上传课程内容文件
           * */
            const afterUploadFile=(data)=>{
                let file=data.content;
                contentfileinfo.value={
                    url: file.path,
                    courseId: courseinfo.value.id,
                    name: file.name,
                    size: file.size
                }
                axios.post("/business/admin/course-content-file/save",contentfileinfo.value).then((response)=>{
                    const data=response.data;
                    if(data.success){
                        Toast.success("上传文件成功!");
                        getContentFile(courseinfo.value.id);
                    }else {
                        Toast.error("上传文件失败!");
                    }
                })

            }

            /*
            * 删除课程内容文件
            * */
            const handledeletefile=(id)=>{
                Loading.show();
                axios.delete("/business/admin/course-content-file/delete/"+id).then((response)=>{
                    Loading.hide();
                    const data=response.data;
                    if(data.success){
                        Toast.success("删除文件成功!");
                        //获取课程文件列表
                        getContentFile(courseinfo.value.id);
                    }else {
                        Toast.error("删除文件失败!");
                    }

                })

            }

            /*
            * 根据文件名称判断预览方式
            * */
            const getFileFormat=(fileName)=>{
                if(!fileName){
                    return ;
                }
                let images=['jpg','png','jpeg'];
                let videos=['mp4','mpeg','avi'];
                let suffix=fileName.substring(fileName.lastIndexOf(".")+1,fileName.length).toLowerCase();
                let validateSuffix;
                for(let i=0;i<images.length;i++){
                    if(images[i].toLowerCase()===suffix){
                        validateSuffix="image";
                        break;
                    }
                }
                for(let i=0;i<videos.length;i++){
                    if(videos[i].toLowerCase()===suffix){
                        validateSuffix="video";
                        break;
                    }
                }
                return validateSuffix;
            }



            onMounted(() => {
                getCourse();
                toContent(courseinfo.value.id);
            });

            //相当于vue2,destroyed
            onUnmounted(()=>{
                clearInterval(saveContentInterval);
            })

            return {
                FILE_USE,
                saveContent,
                toContent,
                afterUploadFile,
                handledeletefile,
                getFileFormat,
                contentfiles,
                saveContentLabel,
                courseinfo,
                saveContentInterval,
            }


        }
    });
</script>